<template>
  <el-container>
    <el-main>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="资质证明">
          <sa-uploader :max="5" :multiple="true" v-model="form.img" fileType="image"></sa-uploader>
          <div class="color-yellow">《动物防疫条件合格证》或《宠物经营相关范围的营业执照》必须上传</div>
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button v-auth="'seller.admin.info.aptitude.apply'" type="primary" @click="apply">
        {{ props.modal.params.ilk === 1 ? '申请' : '重新申请' }}
      </el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
  import { reactive } from 'vue';
  import { api } from '../../info.service';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  const form = reactive({
    img: '',
  });

  const apply = async () => {
    // 首次申请
    if (props.modal.params.ilk === 1) {
      const { error, data } = await api.aptitude.apply_aptitude({
        type: props.modal.params.type,
        category_id: props.modal.params.id,
        industry_qualification: form.img.join(','),
      });
      if (error === 0) {
        emit('modalCallBack', {
          event: 'confirm',
        });
      }
    }
    // 再次申请
    if (props.modal.params.ilk === 2) {
      const { error, data } = await api.aptitude.reapply_aptitude(props.modal.params.c_id, {
        type: props.modal.params.type,
        category_id: props.modal.params.id,
        industry_qualification: form.img.join(','),
      });
      if (error === 0) {
        emit('modalCallBack', {
          event: 'confirm',
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .color-yellow {
    color: #FAAD14;
    margin-left: 10px;
  }
</style>
